<template>
    <div class="app-container">
      <el-form @submit.native.prevent :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px" :label-position="labelPosition">
        <el-form-item label="纱支" prop="wpggA">
            <el-select
                v-model="queryParams.wpggA"
                placeholder="请选择纱支"
                clearable
                filterable
                :loading="warehouseInDetailsDropDown1Loading"
                @change="warehouseInDetailsDropDown1Change"
              >
                <el-option
                    v-for="item in warehouseInDetailsList.a"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                />
            </el-select>
        </el-form-item>
         <el-form-item label="截止日期" prop="ssrqid2">
            <el-date-picker
              value-format="yyyy-MM-dd"
              default-value
              v-model="queryParams.ssrqid2"
              type="date"
              placeholder="请输入截止日期"
              @change="datechange">
            </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
  
      <el-table
        v-loading="loading"
        :data="warehouseCategoryList"
      >
        <af-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200" fixed="left">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="openWarehouseCategoryDetail(scope.row)"
              v-hasPermi="['zhcloud:sjfx:list']"
            >仓储情况</el-button>
          </template>
        </af-table-column>
        <af-table-column label="纱支" prop="wpggA" fixed="left"/>
        <af-table-column label="剩余件数" prop="spjs" />
        <af-table-column label="剩余重量(吨)" prop="spsl" />
      </el-table>
       <pagination
          v-show="total>0"
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          @pagination="getList"
        />
        <div id="warehouseCategoryCircleChartId" :style="circleChartStyle" ></div>
        <div id="warehouseCategoryChartId" :style="chartStyle" ></div>
    </div>
    
  </template>
  
  <script>
  import { getListWarehouseCategory, getWarehouseCategoryCircleChart, getWarehouseCategoryChart } from "@/api/storage/dataAnalysis/warehouseCategory";
  import { warehouseInDetailsDropDown1 } from "@/api/storage/commonGoods/warehouseIn";
  import echarts from 'echarts';
  import variables from '@/assets/styles/variables.scss'
  
  export default {
    name: "WarehouseCategory",
    data() {
      return {
        // 显示搜索条件
        showSearch: true,
        //对齐
        labelPosition: "right",
        //纱支加载
        warehouseInDetailsDropDown1Loading: true,
        //列表加载
        loading:true,
        warehouseCategoryDate:'',
        // 查询参数
        queryParams: {
          wpggA: "",
          ssrqid2: ""
        },
        queryChartParams: {
          wpggA:""
        },
        queryCircleChartParam: {
          ssrqid2:""
        },
        //图表属性
        chartStyle: {
          height:"500px",
          width:"800px",
          margin:"60px auto"
        },
        circleChartStyle: {
          height:"500px",
          width:"800px",
          margin:"60px auto"
        },
        // 仓库品种列表
        warehouseCategoryList: [],
        //纱支列表
        warehouseInDetailsList:[],
        //页数
        pageSize: 10,
        //页码
        pageNum:1,
        // 总条数
        total: 0,
      };
    },
    beforeRouteEnter(to, from, next) {
      const params = to.params
      next(vm => {   
        if(Object.keys(params).length > 0) {
          if(to.params.refresh == true) {
            vm.getList()
            vm.getCircleChart()
            vm.getChart()
          }
        }
      })
    },
    created() {
      this.warehouseInDetails()
      this.getList()
      
    },
    mounted() {
      //需要在dom加载完成后调用
      this.getCircleChart()
      this.getChart()
    },
    methods: {
      /**选择纱织 */
      warehouseInDetails() {
        this.warehouseInDetailsDropDown1Loading = true
        warehouseInDetailsDropDown1({}).then(response => {
          this.warehouseInDetailsList = response.data;
          this.warehouseInDetailsDropDown1Loading = false
        });
      },
      /** 查询仓库品种列表 */
      getList() {
        this.loading = true
        getListWarehouseCategory(this.queryParams, {pageNum:this.pageNum, pageSize:this.pageSize}).then(response => {
          this.warehouseCategoryList = response.rows;
          this.total = response.total;
          this.loading = false
        });
      },

      //圆柱图表
     getChart() {
      let chart = echarts.init(document.getElementById('warehouseCategoryChartId'))
      chart.showLoading({
        text:"",
        color:variables.defaultTheme,
        textCloor:variables.defaultTheme,
        spinnerRadius: 18,
        lineWidth: 2,
      }) 
      this.queryChartParams.wpggA = this.queryParams.wpggA
      getWarehouseCategoryChart(this.queryChartParams).then(response => {
        const data = response.data
        chart.hideLoading()
        this.initChart(data, chart)
      });
    },

     //饼状图表
     getCircleChart() {
      let chart = echarts.init(document.getElementById('warehouseCategoryCircleChartId'))
      chart.showLoading({
        text:"",
        color:variables.defaultTheme,
        textCloor:variables.defaultTheme,
        spinnerRadius: 18,
        lineWidth: 2,
      }) 
      this.queryCircleChartParam.ssrqid2 = this.queryParams.ssrqid2
      getWarehouseCategoryCircleChart(this.queryCircleChartParam).then(response => {
        const data = response.data
        chart.hideLoading()
        this.initCircleChart(data, chart)
      });
    },
  
      /**纱支改变 */
      warehouseInDetailsDropDown1Change() {
        this.getList()
        this.getChart()
      },

      datechange() {
        this.getList()
        this.getCircleChart()
      },
  
      /**打开仓储情况 */
      openWarehouseCategoryDetail(data) {
        this.$router.push({path:"/storage/dataAnalysis/warehouseCategory/warehouseCategoryDetail", query:{
          wpggA: data.wpggA
        }})
      },

      initChart(data, chart) {
        const xAxisName = data.map(item => item.ssrqid)
        let weight = data.map(item => item.spsl)
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: [{
            type: 'category',
            data: xAxisName,
            axisTick: {
              alignWithLabel: true
            }
          }],
          yAxis: [{
            type: 'value',
            name: '重量/吨',
          }],
          series: [{
            name: '重量',
            type: 'bar',
            barGap:'20%',
            barCategoryGap: '40%',
            barWidth: '60%',
            data: weight,
          }]
        }
        // 使用刚指定的配置项和数据显示图表。
        chart.setOption(option)
      },

      initCircleChart(data, chart) {
      const legendData = data.map(item => item.wpggA)
      const seriesData = data.map(item => {
        return {
          name: item.wpggA,
          value: item.spsl
        }
      })

      let option =  {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}吨 ({d}%)'
        },
        legend: {
          orient: 'vertical',
          type: 'scroll',
          right: 0,
          data: legendData,
          itemHeight: 20,
          itemGap: 10,
          textStyle: {
            fontSize: 16,
            fontWeight: 'bolder'
          }
        },
        series: [
          {
            name: '按客户区分',
            type: 'pie',
            radius: ['70%', '85%'],
            center: ['40%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
              formatter: '{b}\n\n{c}吨   {d}% '
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: 'bold',
                color: '#000'
              }
            },
            labelLine: {
              show: false
            },
            data: seriesData
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      chart.setOption(option)
    },

      /**enter键触发 */
      enterClick(e) {
        this.getList()
        this.getChart()
        this.getCircleChart()
      },
  
      /** 重置按钮操作 */
      resetQuery() {
        this.reset()
        this.warehouseInDetails()
        this.getList()
        this.getChart()
        this.getCircleChart()
      },
      reset() {
        Object.assign(this.$data, this.$options.data())
      },
    }
  };
  </script>
  